<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div class="tick-icon checked">
    <span class="tick-icon-line-left"></span>
    <span class="tick-icon-line-right"></span>
    <div class="tick-icon-circular-line-right"></div>
    <div class="tick-icon-ring"></div>
  </div>
  <style>
    .tick-icon {
      margin-top: 100px;
      width: 80px;
      height: 80px;
      border: 4px solid transparent;
      border-radius: 50%;
      margin: 20px auto 30px;
      padding: 0;
      position: relative;
    }
    .tick-icon.loading{
      border-color: rgb(2, 122, 206);

    }
    .tick-icon.checked{
      border-color: green;

    }

    .tick-icon [class^='tick-icon-line'] {
      height: 5px;
      display: block;
      border-radius: 2px;
      position: absolute;
      z-index: 2;
      background-color: rgb(2, 122, 206);
    }
    .tick-icon.checked [class^='tick-icon-line']{
      background-color:green;

    }
    /*勾的左半部分*/
    .checked  .tick-icon-line-left {
      width: 25px;
      left: 14px;
      top: 46px;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      -webkit-animation: lineLeftAnimation 1.5s;
      animation: lineLeftAnimation 1.5s;
    }

    /*勾的右半部分*/
    .checked .tick-icon-line-right {
      width: 47px;
      right: 8px;
      top: 38px;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      -webkit-animation: lineRightAnimation 1.5s;
      animation: lineRightAnimation 1.5s;
    }

    .tick-icon [class^='tick-icon-circular-line'] {
      border-radius: 50%;
      position: absolute;
      width: 60px;
      height: 120px;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
    }

    /*圆的左半部分*/
    .tick-icon [class^='tick-icon-circular-line'][class$='left'] {
      border-radius: 120px 0 0 120px;
      top: -7px;
      left: -33px;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      -webkit-transform-origin: 60px 60px;
      transform-origin: 60px 60px;
    }

    /*圆的右半部分*/
    .tick-icon [class^='tick-icon-circular-line-right'] {
      border-radius: 0 120px 120px 0;
      top: -11px;
      left: 30px;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      -webkit-transform-origin: 0 60px;
      transform-origin: 0 60px;
    }

    .tick-icon-circular-line-left {
      background: rgb(255, 255, 255);
    }


    /*圆圈动画*/
    .loading .tick-icon-circular-line-right {
      -webkit-animation: rotating 1s linear infinite;
      animation: rotating 1s linear infinite;
      background: rgb(255, 255, 255);
    }

    /*圆圈动画*/
    .checked .tick-icon-circular-line-right {
      -webkit-animation: circularLineRightAnimation 1s ease-in forwards;
      animation: circularLineRightAnimation 1s ease-in forwards;
      background: rgb(255, 255, 255);
    }

    .tick-icon-ring {
      width: 80px;
      height: 80px;
      border: 4px solid rgba(2, 122, 206, 0.3);
      border-radius: 50%;
      position: absolute;
      left: -4px;
      top: -4px;
      z-index: 2;
    }

    .tick-icon-fix {
      width: 7px;
      height: 90px;
      position: absolute;
      left: 28px;
      top: 8px;
      z-index: 1;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      background: rgb(255, 255, 255);
    }

    @-webkit-keyframes lineLeftAnimation {
      0% {
        width: 0;
        left: 1px;
        top: 19px;
      }

      54% {
        width: 0;
        left: 1px;
        top: 19px;
      }

      70% {
        width: 50px;
        left: -8px;
        top: 37px;
      }

      84% {
        width: 17px;
        left: 21px;
        top: 48px;
      }

      100% {
        width: 25px;
        left: 14px;
        top: 45px;
      }
    }

    @keyframes lineLeftAnimation {
      0% {
        width: 0;
        left: 1px;
        top: 19px;
      }

      54% {
        width: 0;
        left: 1px;
        top: 19px;
      }

      70% {
        width: 50px;
        left: -8px;
        top: 37px;
      }

      84% {
        width: 17px;
        left: 21px;
        top: 48px;
      }

      100% {
        width: 25px;
        left: 14px;
        top: 45px;
      }
    }

    @-webkit-keyframes lineRightAnimation {
      0% {
        width: 0;
        right: 46px;
        top: 54px;
      }

      65% {
        width: 0;
        right: 46px;
        top: 54px;
      }

      84% {
        width: 55px;
        right: 0;
        top: 35px;
      }

      100% {
        width: 47px;
        right: 8px;
        top: 38px;
      }
    }

    @keyframes lineRightAnimation {
      0% {
        width: 0;
        right: 46px;
        top: 54px;
      }

      65% {
        width: 0;
        right: 46px;
        top: 54px;
      }

      84% {
        width: 55px;
        right: 0;
        top: 35px;
      }

      100% {
        width: 47px;
        right: 8px;
        top: 38px;
      }
    }

    @-webkit-keyframes circularLineRightAnimation {
      0% {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
      }
      100% {
        -webkit-transform: rotate(-405deg);
        transform: rotate(-405deg);
        opacity: 0;

      }
    }

    @keyframes circularLineRightAnimation {
      0% {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
      }
      100% {
        -webkit-transform: rotate(-405deg);
        transform: rotate(-405deg);
        opacity: 0;

      }
    }

    @keyframes rotating {
      from {
        transform: rotate(0)
      }

      to {
        transform: rotate(-360deg)
      }
    }
  </style>
</body>

</html>